<script setup lang="ts">
import {ref} from "vue";
import { useRouter } from 'vue-router';
import FixedNav from "@/components/fixedNav/fixedNav.vue";
import Bottom from "@/components/bottom/bottom.vue";

const activeNav = ref('3') // 默认选中首页
const activeSubNav = ref('3-2')

// 定义路由的跳转
const router = useRouter();
const navigateTo = (path: string) => {
  router.push(path);
};
</script>

<template>
<div class="mainContain">
  <fixed-nav v-model:active-nav="activeNav"
             v-model:active-sub-nav="activeSubNav"></fixed-nav>

<!--  中间内容-->
  <div class="channelControlSection1and2">
    <div class="channelControlSection1">
      <img src="@/assets/images/channelControlTitle.png" class="channelControlTitle" alt="channelControlTitle">
      <span class="channelControlPoint channelControlPoint1"></span>
      <span class="channelControlContent channelControlContent1">数据智能采集</span>
      <span class="channelControlPoint channelControlPoint2"></span>
      <span class="channelControlContent channelControlContent2">高效溯源取证</span>
      <span class="channelControlPoint channelControlPoint3"></span>
      <span class="channelControlContent channelControlContent3">多维分级清理</span>
    </div>
    <div class="channelControlSection2">
      <!--        1-->
      <div class="imgContain imgContain1">

      </div>
      <span class="channelControlSubTitle channelControlSubTitle1">价格管控</span>
      <div class="longLine longLine1"></div>
      <div class="shortLine shortLine1"></div>
      <div class="channelControlSubContent channelControlSubContent1">
        数字软件＋人工复核双管齐下，全网监测排查乱价违规链接，由专家项目组通过常规+创新打击方式清除乱价违规链接，维护品牌良好的价格体系。
      </div>

      <!--        2-->
      <div class="imgContain imgContain2">

      </div>
      <span class="channelControlSubTitle channelControlSubTitle2">窜货治理</span>
      <div class="longLine longLine2"></div>
      <div class="shortLine shortLine2"></div>
      <div class="channelControlSubContent channelControlSubContent2">
        全链路追踪（数据智能采集+暗码植入+采买溯源）+生态协同+自动分级处理的方式，全网线上、全国线下进行排查监控，对于疑似窜货/侵权/假货等行为进行预警及固证，并且与品牌方联动进行分级清理打击。<br>
        <br>
        建立经销商分级管控系统<br>
        制定经销商合规奖励与处罚机制<br>
        开通消费者、经销商扫码举报通道<br>
        智能分级清理响应<br>
        提供暗码植入增值服务
      </div>

      <!--        3-->
      <div class="imgContain imgContain3">

      </div>
      <span class="channelControlSubTitle channelControlSubTitle3">分销收编</span>
      <div class="longLine longLine3"></div>
      <div class="shortLine shortLine3"></div>
      <div class="channelControlSubContent channelControlSubContent3">
        协助品牌方收编优质经销商，回笼流量，扩大品牌市场份额以及提高品牌知名度。
      </div>
    </div>
  </div>

  <!--底部内容-->
  <bottom/>
</div>
</template>

<style scoped>
.mainContain {
  width: 1920px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  left: -8px; /* 新增向左微调 */
  top: -8px;
  box-sizing: border-box; /* 新增盒模型计算方式 */
  background-color: #101010;
}

/*中间内容*/
.channelControlSection1and2 {
  width: 100%;
  height: 2400px;
}
.channelControlSection1 {
  width: 100%;
  height: 720px;
  background-image: url('@/assets/bk/channelControlSection1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.channelControlTitle {
  position: absolute;
  top: 308px;
  left: 400px;
}
.channelControlPoint {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #FF6600;
  /* border: #FF6600 solid 1px; */
}

.channelControlPoint1 {
  position: absolute;
  top: 404px;
  left: 400px;
}

.channelControlPoint2 {
  position: absolute;
  top: 404px;
  left: 594px;
}

.channelControlPoint3 {
  position: absolute;
  top: 404px;
  left: 769px;
}


.channelControlContent {
  font-size: 20px;
  line-height: 28px;
  font-family: "Microsoft YaHei", sans-serif;
  color: #FFFFFF;
}

.channelControlContent1 {
  position: absolute;
  top: 396px;
  left: 424px;
}

.channelControlContent2 {
  position: absolute;
  top: 396px;
  left: 618px;
}

.channelControlContent3 {
  position: absolute;
  top: 396px;
  left: 793px;
}
.channelControlSection2{
  position: relative;
}
.imgContain {
  width: 540px;
  height: 480px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.imgContain1 {
  background-image: url('@/assets/images/channelControlImgContain1.png');
  position: absolute;
  top: 40px;
  left: 1020px;
}

.imgContain2 {
  background-image: url('@/assets/images/channelControlImgContain2.png');
  position: absolute;
  top: 560px;
  left: 360px;
}

.imgContain3 {
  background-image: url('@/assets/images/channelControlImgContain3.png');
  position: absolute;
  top: 1080px;
  left: 1020px;
}
.channelControlSubTitle {
  font-family: "AlibabaPuHuiTi_2_105_Heavy", sans-serif;
  font-size: 40px;
  color: #FF6600;
  line-height: 56px;
  text-align: left;
  font-style: normal;
  position: absolute;
}

.channelControlSubTitle1 {
  top: 185px;
  left: 360px;
}

.channelControlSubTitle2 {
  top: 615px;
  left: 880px;
}

.channelControlSubTitle3 {
  top: 1240px;
  left: 360px;
}
.longLine {
  width: 516px;
  height: 4px;
  background: #FF6600;
  border-radius: 4px;
  opacity: 0.12;
  position: absolute;
}

.longLine1 {
  top: 249px;
  left: 360px;
}

.longLine2 {
  top: 679px;
  left: 880px;
}

.longLine3 {
  top: 1304px;
  left: 360px;
}
.shortLine {
  width: 79px;
  height: 4px;
  background: linear-gradient(90deg, #FF9F00 0%, #FF6600 100%);
  border-radius: 4px;
  position: absolute;
}

.shortLine1 {
  top: 249px;
  left: 360px;
}

.shortLine2 {
  top: 679px;
  left: 880px;
}

.shortLine3 {
  top: 1304px;
  left: 360px;
}
.channelControlSubContent {
  width: 680px;
  font-family: "AlibabaPuHuiTi_2_55_Regular", sans-serif;
  font-size: 22px;
  color: #FFFFFF;
  line-height: 30px;
  text-align: justify;
  font-style: normal;
  position: absolute;
}
.channelControlSubContent1 {
  top: 285px;
  left: 360px;
}

.channelControlSubContent2 {
  top: 715px;
  left: 880px;
}

.channelControlSubContent3 {
  top: 1340px;
  left: 360px;
}

</style>